<template>
  <!-- 内容区域 -->
  <div>
    <div class="buttonBar add_btn_top">
      <el-button
        class=""
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click.stop="editdialog = true"
        >编辑
      </el-button>
      <!-- <el-button class="" icon="el-icon-plus" size="mini" @click="addToSite = true">添加子站点
      </el-button> -->
      <el-button size="mini" @click="openMapDialog">
        <svg-icon class="region" icon-class="region" />
        添加地区
      </el-button>
      <el-button
        v-permission="[2, 'button']"
        class=""
        icon="el-icon-delete"
        size="mini"
        @click="deleteSiteDetails"
        >删除
      </el-button>
      <el-button
        class="tb-one"
        icon="el-icon-close"
        size="mini"
        @click.stop="turn"
        >关闭</el-button
      >
    </div>
    <!-- 站点添加弹窗 -->
    <el-dialog
      title="添加站点"
      close-on-press-escape
      :lock-scroll="false"
      :visible.sync="addToSite"
      v-dialogDrag
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <add-internal-site
        @AddsubmitForm="AddsubmitForm"
        @closaddsite="closeAddDialogForm"
      />
    </el-dialog>
    <!-- 站点编辑弹窗 -->
    <div v-if="editdialog">
      <el-dialog
        title="编辑站点"
        :lock-scroll="false"
        close-on-press-escape
        :visible.sync="editdialog"
        v-dialogDrag
        :close-on-click-modal="false"
        :destroy-on-close="true"
      >
        <edit-update-site
          @submitForm="submitForm"
          @closeeditdialog="closedialogForm"
        />
      </el-dialog>
    </div>

    <Details
      :tokenObj="{ key: 'token', label: '标识符' }"
      :nameObj="{ key: 'name', label: '名称' }"
      :areaTypeName="{ key: 'areaTypeName', label: '站点类型' }"
      :areaTypeObj="{ label: '站点类型' }"
      :detail="areaEntiry"
      :qrCode="qrCode"
    ></Details>
    <div class="details_bottom">
      <div class="">
        <el-tabs class="tabsTop" @tab-click="handleClick" v-model="activeName">
          <!-- <el-tab-pane label="子站点" name="first" class="tabPaneHeight">
            <EmptyData :key="activeName" v-init-screen-h v-if="subAreaList && subAreaList.length == 0"></EmptyData>
            <sitesubsites v-else :key="activeName" v-init-screen-h :subAreaList="subAreaList"
              @toLinkSiteName="toLinkSiteName"></sitesubsites>
          </el-tab-pane> -->
          <el-tab-pane label="设备" name="second" class="tabPaneHeight">
            <EmptyData
              :key="activeName"
              v-init-screen-h
              v-if="deviceList && deviceList.length == 0"
            ></EmptyData>
            <div v-init-screen-h :key="activeName" v-else>
              <ActivationTable
                v-for="assignment in deviceList"
                :key="assignment.id"
                :assignment="assignment"
              >
              </ActivationTable>
            </div>

            <!-- <sitedevice
              v-init-screen-h
              :key="activeName"
              :deviceList="deviceList"
            ></sitedevice> -->
          </el-tab-pane>
          <el-tab-pane label="告警信息" name="third" class="tabPaneHeight">
            <sitewarning :key="activeName" :warnList="warnList"></sitewarning>
          </el-tab-pane>
          <el-tab-pane label="地区信息" name="fourth" class="tabPaneHeight">
            <sitemap
              :key="activeName"
              :zonesList="zonesList"
              @gteZoneList="getZonesList"
            >
            </sitemap>
          </el-tab-pane>
        </el-tabs>
        <Pagination
          @pagination="pagination"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :pageSizes.sync="pageSizes"
        />
      </div>

      <add-map
        ref="addMapRefs"
        :AddMapShow="AddMapShow"
        @changeShow="showAddMap"
        @gteZoneList="getZonesList"
      ></add-map>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import sitedevice from "./site-device";
import sitemap from "./site-map";
import sitesubsites from "./site-subsites";
import sitewarning from "./site-warning";
import EditUpdateSite from "./EditUpdateSite";
import AddInternalSite from "./AddInternalSite";
import Pagination from "../../views/common/page.vue";
import AddMap from "../sitename/AddMap.vue";
import Details from "@/components/Details";
import { subareas } from "@/api/gateway";
import { getAreas, delAreas, getQrcodeAreas } from "@/api/superlinkAreat";
import ActivationTable from "@/components/ActivationTable";
import EmptyData from "@/views/common/emptyData";
import { closeTab } from "@/views/common/js/tab-comm.js";
import { getAssignmentSearchList } from "@/api/assignments";
import { getZones } from "@/api/zones";
export default {
  components: {
    EmptyData,
    ActivationTable,
    Details,
    sitedevice,
    sitemap,
    sitesubsites,
    sitewarning,
    EditUpdateSite,
    AddInternalSite,
    Pagination,
    AddMap
  },
  data() {
    return {
      qrCodeShow: false,
      addToSite: false,
      editdialog: false,
      activeName: "second",
      areaToken: this.$route.query.areaToken,
      areaEntiry: {},
      subAreaList: [],
      qrCode: "",
      deviceList: [],
      warnList: [],
      zonesList: [],
      currentPage: 1, //初始页
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      mapBtn: false,
      AddMapShow: false
    };
  },
  mounted() {
    this.areaByToken();
    // this.getQrcode();
    this.getDeviceList();
    this.getWarnList();
    this.getZonesList();
  },
  watch: {
    $route(to, from) {
      this.$router.go(0);
    }
  },
  methods: {
    turn() {
      // this.$router.go(-1);
      closeTab(this.$route.fullPath, "typeManagement/SiteList");
    },
    openMapDialog() {
      this.AddMapShow = true;
    },
    showAddMap(data) {
      // this.$refs.addMapRefs.handleOpened();
      if (data === "false") {
        this.AddMapShow = false;
      } else {
        this.AddMapShow = true;
      }
    },
    handleClick(tab) {
      // if(this.activeName = 'first'){
      // }
      if (this.activeName == "second") {
        this.getDeviceList();
      }
      if (this.activeName == "third") {
        this.getWarnList();
      }
      if (this.activeName == "fourth") {
        this.getZonesList();
      }
    },
    mouseOver() {
      this.qrCodeShow = true;
    },
    mouseLeave() {
      this.qrCodeShow = false;
    },
    // 添加表单提交
    AddsubmitForm(flg) {
      this.addToSite = flg;
      this.getSiteRelate();
    },
    // 添加表单关闭
    closeAddDialogForm(flg) {
      this.addToSite = flg;
    },
    // 关闭编辑弹窗
    closedialogForm(flg) {
      this.editdialog = flg;
    },
    // 提交编辑弹窗
    submitForm(flg, token) {
      this.editdialog = flg;
      this.toLinkSiteName(token);
      // if (token) {
      //   this.$router.push({
      //     path: "/sitename",
      //     query: { areaToken: token },
      //   });
      // }
      // this.areaByToken();
    },
    formatDateT(date) {
      if (date === undefined) {
        return "N/A";
      }
      return this.$moment(new Date(date)).format("YYYY-MM-DD H:mm:ss");
    },
    toLinkSiteName(areatoken) {
      // this.$router.go(0);
      this.$router.push({
        path: "/_empty",
        query: {
          data: JSON.stringify({ areaToken: areatoken }),
          path: "sitename"
        }
      });
    },
    turnup(areatoken) {
      this.$router.push({
        path: "thesite",
        query: {
          areaToken: areatoken
        }
      });
    },
    details() {
      this.$router.push("site-details");
    },
    // 删除站点
    deleteSiteDetails() {
      this.$confirm(
        "删除站点的同时系统会自动删除其相关的地区数据 确认删除吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          delAreas(this.areaToken).then(res => {
            this.$msg({
              type: "success",
              message: "删除成功!"
            });
            this.turn();
          });
        })
        .catch(() => {});
    },
    areaByToken() {
      // var that = this;
      // var param = {
      //   includeAreaType: true,
      //   includeParentArea: true,
      // };
      getAreas({}, this.areaToken).then(res => {
        const { data } = res;
        this.areaEntiry = Object.assign({}, data);
        this.areaEntiry.areaTypeName = data.areaType.name;
        this.getSiteRelate();
      });
    },
    getQrcode() {
      var param = {
        responseType: "arraybuffer"
      };
      getQrcodeAreas(param, this.areaToken).then(res => {
        this.qrCode =
          "data:image/png;base64," +
          btoa(
            new Uint8Array(res.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ""
            )
          );
      });
    },

    getDeviceList() {
      var areaTokenArr = [];
      areaTokenArr.push(this.areaToken);
      var rn =
        "includeDevice=true&includeCustomer=true&includeArea=true&includeAsset=true&userIds=";
      var param = {
        areaTokens: areaTokenArr,
        page: this.pageNum,
        pageSize: this.pageSize
      };
      getAssignmentSearchList(param, rn).then(res => {
        const r = res.data;
        this.total = r.numResults;
        // this.deviceList = r.results;
        this.deviceList = r.results.map(item => {
          return {
            ...item.ideviceAssignment,
            ...item.user
          };
        });
      });
    },

    getWarnList() {
      let that = this;
      var param = {
        page: this.pageNum,
        pageSize: this.pageSize
      };
      getAreas(param, this.areaToken + "/alerts").then(res => {
        this.total = res.data.numResults;
        that.warnList = res.data.results;
      });
    },
    getSiteRelate() {
      var that = this;
      var tenantToken = "";
      if (_.isString(this.$store.getters.tenant)) {
        tenantToken = JSON.parse(this.$store.getters.tenant).token;
      } else {
        tenantToken = this.$store.getters.tenant.token;
      }
      var areaId = this.areaEntiry.id;
      var jsons = {
        tenantToken: tenantToken,
        areaType: "",
        area: areaId
      };
      // subareas(jsons).then(res => {
      //   if (res.data.data) {
      //     that.subAreaList = res.data.data || [];
      //     that.total = res.data.data.length;
      //   }
      // });
    },
    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.handleClick();
    },
    // 地图信息
    getZonesList() {
      var param = {
        areaToken: this.areaToken,
        page: this.pageNum,
        pageSize: this.pageSize
      };
      getZones(param).then(res => {
        const r = res.data;
        console.log("r :>> ", r);
        this.total = r.numResults;
        this.zonesList = r.results;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.details_bottom {
  background-color: #fff;
  margin-top: 10px;

  /deep/ .el-tabs__nav-wrap {
    padding-left: 20px;
  }
}

.buttonBar {
  position: absolute;
  right: 0px;
  top: -40px;
}

/deep/ .el-button--primary {
  /* background-color: #2680d2;
  border-color: #2680d2; */
}

.SiteDetailsImg {
  width: 206px;
  height: 206px;
  position: absolute;
  top: 24px;
  left: 24px;
  transition: all 0.6s;
}

.SiteDetailsImg:hover {
  transform: scale(1.1);
}

.SiteDetailsToken {
  position: absolute;
  left: 283px;
  top: 66px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #333333;
}

.St {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
}

.StD {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  @include textoverflow(3);
  width: 30%;
  line-height: 22px;
}

.SiteDetailsName {
  position: absolute;
  left: 283px;
  top: 104px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}

.SiteDetailsDescription {
  position: absolute;
  left: 283px;
  top: 144px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}

.SiteDetailsCreated {
  position: absolute;
  left: 63%;
  top: 66px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}

.SiteDetailsUpdated {
  position: absolute;
  left: 63%;
  top: 103px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}

.code-img {
  width: 29px;
  height: 29px;
  float: left;
  margin: -4px 0 0 10px;
}

.box {
  position: absolute;
  left: 23px;
  display: inline-block;
  margin: 40px;
  width: 230px;
  height: 165px;
  padding: 20px;
  -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #bbb;
  z-index: 9999;
}

.box[data-box-arrow]:before,
.box[data-box-arrow]:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px;
  border-color: transparent;
}

.box[data-box-arrow="top"]:before,
.box[data-box-arrow="top"]:after {
  bottom: 100%;
  left: 10px;
}

.box[data-box-arrow="top"]:before {
  border-bottom-color: #bbb;
}

.box[data-box-arrow="top"]:after {
  border-bottom-color: #fff;
  margin-bottom: -1px;
}

.qrCode {
  width: 140px;
  height: 140px;
  margin-top: -20px;
  margin-left: 23px;
}

.qrCode-details {
  margin-left: 52px;
  margin-top: -5px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
}

.details {
  position: absolute;
  left: 63%;
  top: 143px;
}

.view-details {
  float: left;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}

.el-main {
  background-color: #fff;
  padding: 0px;
}

.text {
  display: flex;
  flex-direction: column;
  align-content: space-between;
}

.site-img {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
}

.site-content {
  float: left;
  margin-top: 21px;
  margin-left: 25px;
}

.el-pagination {
  margin-left: 32%;
  margin-top: 3%;
}

.el-dialog__footer {
  /* dialog弹窗边框 */
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* .pag {} */
</style>
